<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<component :is="currentView"></component>
			<button @click="handleChangView('A')">切换到A</button>
			<button @click="handleChangView('B')">切换到B</button>
			<button @click="handleChangView('C')">切换到C</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			var app = new Vue({
				el: '#app',
				components: {
					comA: {
						template: '<div>组件A</div>'
					},
					comB: {
						template: '<div>组件B</div>'
					},
					comC: {
						template: '<div>组件C</div>'
					}
				},
				data: {
					currentView: 'comA'
				},
				methods: {
					handleChangView: function(component) {
						this.currentView = 'com' + component;
					}
				}
			})
		</script>

	</body>
</html>
